<template>
  <div class="user-home">
    <div class="user-home__wrapper">
      <div class="user-home__left">
        <user-home-skeleton v-if="IsShowHomeTop"></user-home-skeleton>
        <div v-else class="user-home__left-top">
          <img :src="userHomeMeatData?.headpic" alt="用户头像" />

          <div class="info-box">
            <div class="user-name">{{ userHomeMeatData?.nickName }}</div>
            <div class="user-social">
              关注 {{ userHomeMeatData?.followCount }} 粉丝 {{ userHomeMeatData?.fansCount }} 文章
              {{ userHomeMeatData?.articleCount }}
            </div>
            <div class="user-summary">{{ userHomeMeatData?.summary }}</div>
          </div>

          <div class="actio-box">
            <el-button
              v-if="!userHomeMeatData?.userFollowId && String(userHomeMeatData?.userId) == userId"
              type="primary"
              plain
              @click="router.push('/user/settings')"
              >编辑资料</el-button
            >

            <el-button
              v-else-if="typeof userHomeMeatData?.userFollowId === 'number'"
              type="success"
              style="width: 74px"
              plain
              @click="aa(userHomeMeatData?.userId as number)"
              >{{ statusd ? '已关注' : '关注' }}</el-button
            >
          </div>
        </div>

        <div class="user-home__left-list">
          <div class="list-head">
            <ul>
              <li>动态</li>
              <li>文章</li>
              <li>标签</li>
              <li>点赞</li>
            </ul>
          </div>

          <div class="list-article">
            <article-card
              v-for="i in dataList"
              style="margin-top: 20px"
              :article="i"
            ></article-card>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ArticleCard from '/@/views/Article/components/ArticleCard.vue'
import UserHomeSkeleton from './components/UserHomeSkeleton.vue'

import router, { useRoute } from '/@/router/index'
import { onUpdated, ref } from 'vue'

import { userHomeMeta } from '/@/api/users/usersHome'

import { articleUserCard } from '/@/api/article/articleCard'

import useUserFollow from '/@/hooks/useUser'

let userHomeMeatData = ref<propsType>()

const { EventFollow } = useUserFollow()

let statusd = ref(false)

let IsShowHomeTop = ref(true)

onUpdated(() => {
  statusd.value = userHomeMeatData.value?.userFollowId ? true : false
})

const aa = (passiveFollowId: number) => {
  EventFollow(passiveFollowId, statusd.value).then((res) => {
    if (res) {
      statusd.value = !statusd.value
    } else {
      alert('请登录!')
    }
  })
}

// const article = {
//   articleId: 12, // 文章ID
//   pushDate: '1天前', // 发布时间
//   nickName: '轩小浅', // 发表用户名
//   tagName: 'Vue.js', // 标签
//   title: '面试自我介绍5句话公式', // 文章题目
//   articleSummary:
//     '开源的世界每天都丰富多彩，2022年前端领域会有什么新的挑战？下面是我们整理的20个有趣的开源项目，希望当中有您想要收藏的那一个。', // 文章摘要
//   likeCount: 199, // 文章点赞数
//   commentCount: 100, // 文章评论数
//   readCount: 999, // 文章浏览量
//   articleImg: 'https://s3.bmp.ovh/imgs/2022/03/8967922835e4c803.png'
// }

// const dataList = [article, article, article, article, article, article]

const dataList = ref()

let userId = localStorage.getItem('userId')

interface propsType {
  userId: number // 用户Id
  nickName: string // 用户昵称
  headpic: string // 用户头像地址
  summary: string // 自我简介

  fansCount: number // 粉丝数
  followCount: number //  关注数
  articleCount: number // 文章数
  userFollowId: number // 是否关注
}

const route = ref(useRoute())
userHomeMeta({
  homeAddress: route.value.params.homeAddress,
  userId: localStorage.getItem('userId') ?? -1
}).then((res) => {
  if (res.data == '') {
    router.push('/404')
    return false
  }

  IsShowHomeTop.value = false
  userHomeMeatData.value = res.data
})

articleUserCard({
  homeAddress: route.value.params.homeAddress as string,
  userId: localStorage.getItem('userId') ?? -1
}).then((res) => {
  dataList.value = res.data
})
</script>

<style lang="scss" scoped>
.user-home {
  width: 100%;
  min-height: calc(100vh - 60px);
  overflow: hidden;

  min-width: 740px;

  background-color: #f1f2f9;

  &__wrapper {
    width: 100%;

    margin-top: 20px;

    display: flex;

    justify-content: center;

    // background-color: white;

    .user-home__left {
      width: 740px;

      &-top {
        width: 100%;
        height: 160px;
        background-color: white;
        display: flex;
        padding: 1rem;
        border-radius: 2px;
        box-sizing: border-box;

        align-items: center;

        img {
          flex: 0 0 auto;
          width: 6rem;
          height: 6rem;

          margin-left: 0.8rem;
          margin-right: 1rem;
          background-color: #f9f9f9;
          border-radius: 50%;
        }

        .info-box {
          flex: 1 1 auto;
          margin-right: 1rem;

          display: flex;
          flex-direction: column;
          justify-content: center;

          .user-name {
            display: flex;
            align-items: center;

            margin: 0;
            padding: 0;
            font-size: 1.5rem;
            font-weight: 600;
            line-height: 1.2;
            color: #000;
          }

          .user-social {
            margin-top: 10px;
          }

          .user-summary {
            margin-top: 14px;
            color: #72777b;
          }
        }

        .actio-box {
          flex: 0 0 auto;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          margin-right: 1rem;
        }
      }

      &-list {
        width: 100%;

        margin-top: 20px;

        .list-head {
          width: 100%;
          height: 46px;
          background-color: white;
          ul {
            display: flex;

            height: 100%;

            align-items: center;

            li {
              padding: 0 1rem;
              /*text-align: center;*/
              flex-shrink: 0;
              box-sizing: border-box;

              color: #909090;

              border-right: 1px solid #eaeaea;

              font-size: 0.9rem;

              user-select: none;

              cursor: pointer;

              &:hover {
                color: #007fff;
              }

              &:first-child {
                color: #007fff;
              }

              &:last-child {
                border-right: 0;
              }
            }
          }
        }

        .list-article {
          width: 100%;

          display: flex;

          flex-direction: column;
        }
      }
    }
  }
}
</style>
